<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
    <head>
        <title>Search By Customer Birthday</title>
        <%= stylesheet_link_tag "../javascripts/ext/resources/css/ext-all.css" %>
        <%= stylesheet_link_tag "/stylesheets/tasks.css" %>
        <%= javascript_include_tag "ext/adapter/prototype/prototype.js" %>
        <%= javascript_include_tag "ext/adapter/prototype/scriptaculous.js" %>
        <%= javascript_include_tag "ext/adapter/prototype/effects.js" %>
        <%= javascript_include_tag "ext/adapter/prototype/ext-prototype-adapter.js" %>
        <%= javascript_include_tag "ext/ext-all-debug.js" %>
        <%= javascript_include_tag "ext/build/locale/ext-lang-zh_CN.js" %>
    </head>
    <body>
        <script type="text/javascript">
            Ext.onReady(function(){
                var viewPanel = new Ext.Panel({
                    frame: true,
                    title: 'Views',
                    collapsible: true,
                    contentEl: 'task-views',
                    titleCollapse: true
                });
                
                var taskActions = new Ext.Panel({
                    frame: true,
                    title: 'Task Actions',
                    collapsible: true,
                    contentEl: 'task-actions',
                    titleCollapse: true
                });
                
                var groupActions = new Ext.Panel({
                    frame: true,
                    title: 'Task Grouping',
                    collapsible: true,
                    contentEl: 'task-grouping',
                    titleCollapse: true
                });
                var actionPanel = new Ext.Panel({
                    id: 'action-panel',
                    region: 'west',
                    split: true,
                    collapsible: true,
                    collapseMode: 'mini',
                    width: 200,
                    minWidth: 150,
                    border: false,
                    baseCls: 'x-plain',
                    items: [taskActions, viewPanel, groupActions]
                });
                new Ext.Viewport({
                    enableTabScroll: true,
                    layout: "border",
                    items: [{
                        title: "面板",
                        region: "north",
                        height: 50,
                        html: "<h1>网站后台管理系统!</h1>"
                    }, actionPanel,        //					{
                    //                        title: "菜单",
                    //                        region: "west",
                    //                        width: 200,
                    //                        collapsible: true,
                    //                        html: "菜单栏"
                    //                    }, 
                    {
                        xtype: "tabpanel",
                        region: "center",
                        items: [{
                            title: "面板1"
                        }, {
                            title: "面板2"
                        }]
                    }]
                });
            });
        </script>
        <ul id="task-views" class="x-hidden">
            <li>
                <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-show-all"/><a id="view-all" href="#">All tasks</a>
            </li>
            <li>
                <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-show-active"/><a id="view-active" href="#">Active tasks</a>
            </li>
            <li>
                <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-show-complete"/><a id="view-complete" href="#">Completed tasks</a>
            </li>
        </ul>
        <ul id="task-actions" class="x-hidden">
            <li id="new-task">
                <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-edit"/><a id="action-new" href="#">Add a new task</a>
            </li>
            <li style="display:none;">
                <img src="/javascripts/ext/resources/images/default/s.gif"/><a id="action-complete" href="#">Mark selected task<span class="s">s</span> completed</a>
            </li>
            <li style="display:none;">
                <img src="/javascripts/ext/resources/images/default/s.gif"/><a id="action-active" href="#">Mark selected task<span class="s">s</span> active</a>
            </li>
            <li style="display:none;">
                <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-delete"/><a id="action-delete" href="#">Delete selected task<span class="s">s</span></a>
            </li>
        </ul>
        <ul id="task-grouping" class="x-hidden">
            <li>
                <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-by-date"/><a id="group-date" href="#">By Date</a>
            </li>
            <li>
                <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-by-category"/><a id="group-cat" href="#">By Category</a>
            </li>
            <li>
                <img src="/javascripts/ext/resources/images/default/s.gif" class="icon-no-group"/><a id="no-group" href="#">No Grouping</a>
            </li>
        </ul>
    </body>
</html>
